<template>
    <section :class="cname">
        <!-- :options是插件官方指定的参数，而options是我们自定义的变量 -->
        <swiper :options="options" :not-next-tick="options.notNextTick">
            <swiper-slide v-for="item in items" :key="item.href">
                <router-link :to="{ name : item.href }">
                    <img :src="item.src" alt="">
                </router-link>
            </swiper-slide>
            <div class="swiper-pagination" v-if="options.pagination" slot="pagination"/>
            <!-- <div class="swiper-pagination"  slot="pagination"></div> -->
        </swiper>
    </section>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
    // 声明组件
    components : {
        swiper,
        swiperSlide
    },
    
    props : {
        cname   : {
            type    : String,
            default : ''
        },

        options : {
            type : Object,
            default(){
                return {
                    autoplay    : true,
                    loop        : true,
                    pagination  : {
                        el      : '.swiper-pagination'
                    },
                    notNextTick : false
                }
            }
        },

        items   : {
            type : Array,
            default(){
                return []
            }
        }
    }
}
</script>

<style lang="css">
    /* 加上 ~ 符号才能找到路径 */
    @import '~swiper/dist/css/swiper.css'; 
</style>